<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<!--/**
	<div th:replace="header"></div>
	这种只指定模板名称的引用方式会把当前文件所以内容引用到父页面，
	因此不能写 <!DOCTYPE html> 和 <html> 等其他任何额外的标签。
**/-->
<div th:fragment="header" class="layui-header">
	<div th:replace="include::logo"></div>

	<!-- 头部区域（可配合layui 已有的水平导航） -->
	<ul class="layui-nav layui-layout-left">
		<li class="layui-nav-item layui-hide-xs">
			<a href="/">
				<i class="layui-icon layui-icon-home" style="font-weight:bold;font-size: 30px; color: #1E9FFF;"></i>
				<span>Home</span>
			</a>
		</li>
	</ul>

	<ul class="layui-nav layui-layout-right">
		<li class="layui-nav-item layui-hide layui-show-md-inline-block">
			<a href="javascript:;">
				<img src="/favicon.ico" class="layui-nav-img">
				Admin
			</a>
		</li>
	</ul>

	<script>
		layui.use(['element', 'layer', 'util'], function(){
		  let element = layui.element
		  let layer = layui.layer
		  let util = layui.util
		  let $ = layui.$

		  //头部事件
		  util.event('lay-header-event', {
			//左侧菜单事件
			menuLeft: function(othis){
			  layer.msg('展开左侧菜单的操作', {icon: 0});
			},
			// 右侧菜单事件
			menuRight: function(){
			  layer.open({
				type: 1
				,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
				,area: ['260px', '100%']
				,offset: 'rt' //右上角
				,anim: 5
				,shadeClose: true
			  });
			}
		  });
		});
	</script>
</div>
</html>
